<template>
    <!-- 首页顶部直通车组件 -->
    <div class="top-bar">
        <div class="wrap">
            <div class="l">欢迎来到叩丁狼积分商城</div>
            <div class="r">
                <ul>
                    <li><img class="avatar" src="@/assets/img/userImg.f8bbec5e.png" alt="">用户名：游客--</li>
                    <li>用户名：游客</li>
                    <li>我的积分：--</li>
                    <li>获取积分</li>
                    <li>扣丁狼官网</li>
                    <li class="login-btn">登录</li>
                </ul>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: '',
        components: {

        },
        props: {

        },
        data() {
            return {

            };
        },
        methods: {

        },
        watch: {

        },
        created() {

        },
        mounted() {

        },
        computed: {

        },
    };
</script>

<style scoped lang="less">
    .top-bar {
        height: 40px;
        background: #242B39;

        .wrap {
            display: flex;
            justify-content: space-between;
            align-items: center;
            height: 100%;
            font-size: 14px;
            font-family: SourceHanSansSC;
            font-weight: 300;
            color: #FFFEFE;

            .l {
                height: 100%;
                line-height: 40px;

            }

            .r ul {
                display: flex;
                align-items: center;

                li {
                    display: flex;
                    align-items: center;
                    margin-left: 20px;
                    cursor: pointer;

                    .avatar {
                        margin-right: 10px;
                        width: 26px;
                        height: 26px;
                        background: #7D8696;
                        border: 1px solid #8891A1;
                        border-radius: 13px;
                    }

                    &.login-btn {
                        width: 124px;
                        height: 40px;
                        text-align: center;
                        background: #0A328E;
                        display: flex;
                        justify-content: center;
                    }
                }

            }
        }
    }
</style>